<template>
  <el-dialog :title="currentBtn.name" :append-to-body="true" v-if="dialogVisible" :visible.sync="dialogVisible"
  width="480px">
   <template v-if="step === 1">
      <el-form :model="assignForm" ref="assignForm">
        <el-form-item prop="assignTo" label="选择人员" :rules="[ { required: true, message: '请选择选择人员',  validator: validateAssign, trigger: 'change' } ]">
          <optionalScope
            :isTileDept="true"
            :isCheckbox="true"
            :tabs="tabs"
            @validateField="validateField"
            :value="assignForm.assignTo">
          </optionalScope>
        </el-form-item>
      </el-form>
    </template>
  <template v-else-if="step === 4">
    <p class="filter-text"><i class="V7_iconfont V7_iconV7tubiao_zhongyaoxiaoxi zhongyaoxiaoxi-style"></i>仅调整本条数据的当前处理人，不受节点配置影响</p>
    <div class="node">
      <p class="node-text">当前所在节点</p>
      <p class="node-name">{{dealWithInfo.activityName || '--'}}</p>
    </div>
    <p class="handler-text">当前处理人</p>
    <el-select filterable class="el-select" v-model="userValue" placeholder="请选择">
      <el-option
        v-for="item in userOptions"
        :key="item._id"
        :label="item.name"
        :value="item._id">
      </el-option>
    </el-select>
  </template>
  <template v-else>
    <div v-if="currentBtn.chatText">{{currentBtn.chatText}}</div>
    <el-form :model="form" :rules="currentBtn.remarkType === 0 ? rules : []" ref="form" v-if="currentBtn.remarkType !== 2">
      <el-form-item
      prop="remarkText"
      label="备注">
      <el-input v-model="form.remarkText" type="textarea"></el-input>
    </el-form-item>
    </el-form>
  </template>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitAssign" v-if="step === 1">转派</el-button>
    <el-button type="primary" @click="submitFilter" v-else-if="step === 4">提交</el-button>
    <el-button type="primary" @click="submit" v-else>确 定</el-button>
  </span>
</el-dialog>
</template>
<script lang="ts">
import { Component, Vue, Ref, Prop } from 'vue-property-decorator'
import optionalScope from '../../config/serviceConfig/components/optionalScope.vue'
import { CommonModule } from '@/store/modules/common'
@Component({
  name: 'Assign',
  components: {
    optionalScope
  }
})
export default class OperBtnDialog extends Vue {
  @Prop(Object) public currentBtn!: any
  @Prop(Array) public tabs!: any
  private form = {
    remarkText: ''
  }

  private userValue = ''
  private dealWithInfo = {}

  get userOptions () {
    return (CommonModule as any).publicCache.userList.map(v => ({ name: `${v.agentName} 【${v.agentNumber}】`, _id: v._id }))
  }

  public rules = {
    remarkText: [{ required: true, message: '请输入备注', trigger: 'blur' }]
  };

  private assignForm = {
    assignTo: {
      engineer: [],
      technology: [],
      service: [],
      user: [],
      dept: []
    }
  }

  private validateAssign = (rule, value, callback) => {
    console.log(value)
    if (value && !value.dept.length && !value.engineer.length && !value.service.length && !value.technology.length && !value.user.length) {
      callback(new Error('请选择人员'))
    } else {
      callback()
    }
  }

  private validateField () {
    if ((this as any).$refs.assignForm) {
      (this as any).$refs.assignForm.validateField('assignTo');
    }
  }

  private submitAssign () {
    (this.$refs as any).assignForm.validate((valid) => {
      if (valid) {
        if (this.currentBtn.popChat) {
          this.step = 2
          this.form.remarkText = ''
        } else {
          this.dialogVisible = false
          this.$emit('handleAssign', { remark: this.form.remarkText, assignTo: this.assignForm.assignTo })
        }
      } else {
        return false;
      }
    });
  }

  private dialogVisible = false
  private step = 1
  public open () {
    this.step = 1
    this.assignForm = {
      assignTo: {
        engineer: [],
        technology: [],
        service: [],
        user: [],
        dept: []
      }
    }
    this.dialogVisible = true;
  }

  public filterOpen (data) {
    this.dealWithInfo = data
    this.userValue = data.master || ''
    this.currentBtn.name = '调整当前处理人'
    this.step = 4
    this.dialogVisible = true;
  }

  public close () {
    this.dialogVisible = false;
  }

  private submit () {
    if ((this.$refs as any).form) {
      (this.$refs as any).form.validate((valid) => {
        if (valid) {
          this.dialogVisible = false
          this.$emit('handleAssign', { remark: this.form.remarkText, assignTo: this.assignForm.assignTo })
        } else {
          return false;
        }
      });
    } else {
      this.dialogVisible = false
      this.$emit('handleAssign', { remark: this.form.remarkText, assignTo: this.assignForm.assignTo })
    }
  }

  private submitFilter () {
    this.$emit('handleFilter', { userValue: this.userValue })
  }
}
</script>
<style lang="stylus" scoped>
.filter-text
  padding: 0px 16px
  gap: 8px
  height: 34px
  line-height: 34px
  background: #FFFBE6
  border-radius: 4px
  font-family: 'PingFang SC';
  font-style: normal
  font-weight: 400
  font-size: 14px
  color: #303753
.node
  .node-text
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    margin-top 16px
    margin-bottom 7px
  .node-name
    padding: 3px 8px;
    gap: 6px;
    height: 24px;
    line-height: 18px
    display: inline-block
    background: #E5F3FD;
    border-radius: 4px;
    font-family: 'PingFang SC';
    font-style: normal;
    font-weight: 500;
    font-size: 12px;
    color: #008BEE;
.handler-text
  margin-top 19px
  margin-bottom 11px
  font-family: 'PingFang SC';
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  color: #303753;
.el-select
  width 100%
.zhongyaoxiaoxi-style
  color: #FAAD14
  margin-right 8px
</style>
